<template>
    <div class="con">
        <div class="container" :class="{ 'right-panel-active': isRightPanelActive }">
            <!-- Sign Up -->
            <div class="container__form container--signup">
                <form @submit.prevent="submitSignUp" class="form" id="form1">
                    <h2 class="form__title">需要注册？</h2>
                    <input type="text" placeholder="User" class="input" />
                    <input type="email" placeholder="Email" class="input" />
                    <input type="password" placeholder="Password" class="input" />
                    <button class="btn">注 册</button>
                </form>
            </div>

            <!-- Sign In -->
            <div class="container__form container--signin">
                <el-form class="form" id="form2">
                    <h2 class="form__title">欢迎回来！</h2>
                    <input v-model="param.username" type="text" id="text" placeholder="账号" class="input" />
                    <input v-model="param.password" type="password" id="password" placeholder="密码" class="input" />
                    <p v-if="flag" style="color: red">用户名或密码错误</p>
                    <a href="#" class="link">您似乎忘记了密码?（戳我）</a>
                    <button type="submit" class="btn" style="margin-top: 1.5rem;" @click="login">登 录</button>
                </el-form>
            </div>

            <!-- 切换 -->
            <div class="container__overlay">
                <div class="overlay">
                    <div class="overlay__panel overlay--left">
                        <button class="btn" @click="togglePanel(false)">登 录</button>
                    </div>
                    <div class="overlay__panel overlay--right">
                        <button class="btn" @click="togglePanel(true)">注 册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isRightPanelActive: false,
            param: {
                username: '',
                password: '',
            }
        };
    },
    methods: {
        login() {
            //用户登录请求
            this.$axios.post('api/uums-server/loginByMySQL', this.param)
                .then(response => {

                    
                        console.log(response.data.data);
                        
                        //跳转到首页
                        this.$router.push('/order/orderApplication');
                        //把jwt保存到localStorage
                        localStorage.setItem("authorization", response.data.data.jwt)
                        //把用户信息保存到localStorage（所有组件都可以获取到）
                        localStorage.setItem("userInfo", JSON.stringify(response.data.data.userInfo))
                    
                    if (response.data.code === 2005) {
                        //用户已存在
                        this.$message.error(response.data.msg);
                    }
                    if (response.data.code === 2001) {
                        //用户名或密码错误
                        this.$message.error(response.data.msg);
                    }
                })
        },
        togglePanel(isSignUp) {
            this.isRightPanelActive = isSignUp;
        },
        submitSignUp() {
            console.log("Sign Up form submitted");
        },
    }
};
</script>

<style scoped>
@import url(../../assets/css/style.css);
</style>
